<!-- 专题页 -->
<template>
  <div class="topic_box">
    <ul>
      <li v-for="item in topicArr" :key="item.id">
        <img v-lazy="item.scene_pic_url" alt="">
        <h4>{{ item.title }}</h4>
        <p>{{ item.subtitle }}</p>
      </li>
    </ul>
    <!-- 分页 -->
    <van-pagination
    v-model="page"
    :page-count="totalPages"
    mode="simple"
    @change="changeFn"
    />
  </div>
</template>

<script>
import { getTopicList } from "@/http/http.js"
export default {
    data() {
      return {
          page: 1,
          size: 10,
          topicArr: [],
          totalPages: "",
      };
    },
    created(){
      console.log(getTopicList);
    // 初始化调用获取数据
      this.getData (this.page)
    },
    methods: {
      getData(num) {
        getTopicList({ page: num, size: this.size }).then((res) => {
          console.log(res);
          this.topicArr = res.data.data.data;
          this.totalPages = res.data.data.totalPages;
        });
      },
      changeFn() {
        console.log(this.page);
        this.getData(this.page);
      },
    },


};
</script>

<style scoped lang='less'>
/* @import url(); 引入css类 */
.topic_box {
  padding-bottom: 100px;
  box-sizing: border-box;
  ul {
    li {
      width: 100%;
      img {
        width: 100%;
        display: block;
      }
      h4 {
        text-align: center;
        line-height: 60px;
      }
      p {
        font-size: 16px;
        text-align: center;
        line-height: 40px;
      }
    }
  }
}
//deep/ 一般用于项目中引入ui组件库，修改ui组件库的原样式，加/deep/提高权重
/deep/.van-pagination__page-desc {
  display: none;
}
</style>
